import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { Menu, } from 'antd';
import './left-nav.css'
import {
    HomeOutlined,
    UserOutlined,
    AppstoreOutlined,
    MenuOutlined,
    SolutionOutlined,
    AreaChartOutlined,
    BarChartOutlined,
    LineChartOutlined,
} from '@ant-design/icons';
const { SubMenu } = Menu;

class LeftNav extends Component {
    render() {
        return (
            <>
                <Link to='/' className='left-nav1'>
                    <header>汽车4S后台</header>

                </Link>
                <div className='left-nav-menu' style={{ width: 100 }}>
                    <Menu
                        defaultSelectedKeys={['1']}
                        mode="inline"
                        theme="dark"
                        
                        style={{ width: '200px'}}
                    >
                        <Menu.Item key="1" icon={<HomeOutlined />}>
                            <Link to='/home'>首页</Link>
                        </Menu.Item>
                        <SubMenu key="sub1" icon={<AppstoreOutlined />} title="商品">
                            <Menu.Item icon={<MenuOutlined />} key="sub1-1"><Link to='/category'>商品类别管理</Link></Menu.Item>
                            <Menu.Item icon={<MenuOutlined />} key="sub1-2"><Link to='/product'>商品管理</Link></Menu.Item>
                        </SubMenu>
                        <Menu.Item key="2" icon={<SolutionOutlined />}>
                            <Link to='/user'>用户管理</Link>
                        </Menu.Item>
                        <Menu.Item key="3" icon={<UserOutlined />}>
                            <Link to='/role'>角色管理</Link>
                        </Menu.Item>
                        <SubMenu key="sub2" icon={<AreaChartOutlined />} title="图形图标">
                            <Menu.Item icon={<BarChartOutlined />} key="sub2-1"><Link to='/bar'>柱形图</Link></Menu.Item>
                            <Menu.Item icon={<LineChartOutlined />} key="sub2-2"><Link to='/line'>折线图</Link></Menu.Item>
                        </SubMenu>
                    </Menu>
                </div>
            </>
        );
    }
}

export default LeftNav;